<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .box {
        width: 800px;
        margin: auto;
    }

    h1 {
        text-align: center;
    }

    .data {
        width: 800px;
        padding: 70px 25px;
        background: #1abc9c;
    }

    .data ul {
        margin: 0;
        padding: 0;
    }

    .data ul li {
        color: white;
        font-size: 20px;
        /* text-transform: uppercase; */
        letter-spacing: 3px;
    }

    .data ul span {
        text-align: center;
        display: block;
        margin-bottom: 15px;
    }

    .data .prev {
        float: left;
        padding-top: 10px;
        cursor: pointer;
    }

    .data .next {
        float: right;
        padding-top: 10px;
        cursor: pointer;
    }

    .weekdays {
        width: 800px;
        margin: 0;
        padding: 10px 0;
        background-color: #ddd;
    }

    .weekdays li {
        display: inline-block;
        width: 13.6%;
        color: #666;
        text-align: center;
    }

    .days {
        width: 800px;
        padding: 10px 0;
        background: #eee;
        margin: 0;
    }

    .days li {
        list-style-type: none;
        display: inline-block;
        width: 13.6%;
        text-align: center;
        margin-bottom: 5px;
        font-size: 12px;
        cursor: pointer;
        color: #777;
    }

    .days li:hover {
        color: rgb(216, 91, 8);
    }

    .days li .active {
        padding: 5px;
        background: #1abc9c;
        color: white !important
    }

    /* Add media queries for smaller screens */
    @media screen and (max-width:720px) {

        .weekdays li,
        .days li {
            width: 13.1%;
        }
    }

    @media screen and (max-width: 420px) {

        .weekdays li,
        .days li {
            width: 12.5%;
        }

        .days li .active {
            padding: 2px;
        }
    }

    @media screen and (max-width: 290px) {

        .weekdays li,
        .days li {
            width: 12.2%;
        }
    }
</style>

<body>
    <div class="box">
        <h1>CSS 日历</h1>

        <div class="data">
            <ul>
                <li class="prev">❮</li>
                <li class="next">❯</li>
                <li><span class="year" style="text-align: center;">2016</span></li>
                <li class="month" style="text-align:center">August<br></li>

            </ul>
        </div>

        <ul class="weekdays">
            <li>Mo</li>
            <li>Tu</li>
            <li>We</li>
            <li>Th</li>
            <li>Fr</li>
            <li>Sa</li>
            <li>Su</li>
        </ul>

        <ul class="days">

        </ul>
    </div>

</body>
<script>
    var date = new Date();

    add();
    function add() {
        var cyear = date.getFullYear(); //现在是多少年
        var cmonth = date.getMonth(); //现在是几月
        var cdays = new Date(cyear, cmonth + 1, 0).getDate();//一个月有多少天
        var cday = date.getDate();//今天是几号
        // console.log(cday);

        var week = date.getDay();
        // console.log(week);

        // console.log(cday);
        // var bian = 4




        var arr = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',]




        var year = document.getElementsByClassName('year')[0];
        var month = document.getElementsByClassName('month')[0];
        var day = document.getElementsByClassName('days')[0];
        var prev = document.getElementsByClassName('prev')[0];
        var next = document.getElementsByClassName('next')[0];

        var html = '';

        for (var j = 1; j < week; j++) {
            html += '<li></li>';

        }
        for (var i = 1; i <= cdays; i++) {
            if (i == cday) {
                html += '<li><span class="active">' + i + '</span></li>';
            }
            else {
                html += '<li>' + i + '</li>';
            }
        }


        year.innerHTML = cyear;
        month.innerHTML = arr[cmonth];
        day.innerHTML = html;
        prev.onclick = function () {
            date.setMonth(cmonth - 1)
            add();
        }
        next.onclick = function () {
            date.setMonth(cmonth + 1)
            add();
        }
    }
</script>
<script>
    var c = 3;
    var date = new Date();
    var a = date.getMonth(c);
    console.log(a);
    date.setMonth(c - 1);
    var b = date.getMonth();
    console.log(b);
</script>

</html>